<!DOCTYPE html>
<html lang="en">
<head>
    <title>工作报告列表</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=e9c5bb62">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=66b457d6">
    <style>
        .table>thead>tr>th{
            background-color: #d3e8fd !important;
        }
    </style>
</head>
<body>
<section class="content"  id="app">
    <div style="height: 25px;margin-bottom: 10px;">
     <input class="pull-left form-control pull-left input-sm" type="text" v-model="time" @focus="showDatePicker($event)" placeholder="请选择时间" style="width: 150px;">
        <input type="text" placeholder="关键字" class="form-control pull-left input-sm" style="width: 150px; margin-left: 10px;" v-model="readerName">
        <button type="button" class="btn oaBtn btn-sm pull-left" style="margin-left: 10px;" @click="getList">查询</button>
    </div>
    <div class="box-body no-padding iframeH3" style="overflow: auto;background: #fff;border-top: 1px solid #cbcbcd;
    border-bottom: 1px solid #cbcbcd">
        <table class="table table-hover text-center">
            <thead><tr>
                <th style="width:192px">公司</th>
                <th style="width:140px">部门</th>
                <th style="width:140px">职位</th>
                <th style="width:140px">姓名</th>
                <th style="width:140px">应读数量</th>
                <th style="width:140px">已读数量</th>
                <th style="width:140px">未读数量</th>
                <th style="width:140px">回复数量</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,i) in list">
                <td >{{item.readerCompanyName}}</td>
                <td >{{item.readerDepartName}}</td>
                <td >{{item.readerRoleName}}</td>
                <td >{{item.readerName}}</td>
                <!--<td style="width:15%;">{{convertFlage2Name(item.flage)}}</td>-->
                <td >{{item.allCount}}</td>
                <td >{{item.readedCount}}</td>
                <td >{{item.unreadCount}}</td>
                <td>{{item.replyCount}}</td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- /.box-body -->
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=0b5caf39"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=0c4d95a9"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript">
    console.log(urlConfig);
    var app = new Vue({
        el:'#app',
        data:{
            currentUser:getCurrentUser(),
            list:[],
            time:"",
            readerName:""
        },
        methods:{
            showDatePicker: function (e) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        that.time = dp.cal.getNewDateStr();
                        return true;
                    },
                    //dateFmt:'yyyy-MM-dd HH:mm'
                });
                $(e.target).blur();
            },
            getList:function (e) {
                var that=this;
                $.wyui.postMethod("/report/emailReport.json",{
                    reportDate: that.time,
                    readerName: that.readerName
                },function (list) {
                    console.log(list);
                    that.list= list;
                });
            }
        },
        mounted:function () {
            var today = new Date().Format("yyyy-MM-dd");//今天的日期
            var yesterday= new Date();
            yesterday.setTime(yesterday.getTime()-24*60*60*1000);
            var that = this;
            var hour = new Date().getHours();
            if(hour<17){
                that.time=yesterday.Format("yyyy-MM-dd")
            }else{
                that.time=today;
            }

            $.wyui.postMethod("/report/emailReport.json",{
                reportDate: that.time,
                readerName: that.readerName
            },function (list) {
                console.log(list);
                that.list= list;
            });

            repaintFreeze = function () {
                var freezeElement = $(".table");
                $(".freezeHead").remove();
                var tableCalss = freezeElement.attr("class");
                var tableStyle = freezeElement.attr("style");
                var tableHead = freezeElement.find("thead").prop("outerHTML");
                var arr = new Array();
                arr.push("<div class='freezeHead' style='position: absolute;'>");
                arr.push("<table class='" + tableCalss + "' style='" + tableStyle + "'>");
                arr.push(tableHead);
                arr.push("</table>");
                arr.push("</div>");
                $(".table").before(arr.join(" "));
                $(".freezeHead table").eq(0).width(freezeElement.eq(1).width());
                $(".table").eq(1).find("th").each(function (i, item) {
                    $(".freezeHead table th").eq(i).width(freezeElement.eq(1).find("th").eq(i).width());
                });
            }
            repaintFreeze();
            setInterval(function () {
                repaintFreeze();
            }, 300);
        }
    });
</script>

</body>
</html>